<template>
  <div class="login">
    <Header>邮箱登录</Header>
    <section>
      <div class="form">

        <div class="input-wrapper">
          <input type="text" placeholder="请输入邮箱" v-model="form.email">
        </div>

        <div class="input-wrapper">
          <input type="text" placeholder="请输入图像验证码" v-model="form.yzm"> 
          <img :src="yzm_img" @click="handleYzm">
        </div>

        <div class="input-wrapper">
          <input type="text" placeholder="请输入邮箱验证码" v-model="form.email_yzm">
          <button @click="handleEmailYzm" :disabled="disabled">{{ text }}</button>
        </div>

        <input type="sumbit" @click="handleLogin" value="登录">

        <div class="zc">
          <router-link to="/pwdLogin">密码登录</router-link>

          <router-link to="/register">快速注册</router-link>
        </div>

      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from "vant"
import { get_consumer_email_yzm, post_consumer_login } from '@/api/consumerApi.js'

import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const yzm_img = ref( 'http://localhost:3000/consumer/yzm?uid=' + (new Date()).getTime() )
const handleYzm = () => {
  yzm_img.value = 'http://localhost:3000/consumer/yzm?uid=' + (new Date()).getTime()
}

const rules = reactive({
  email: {
    rule:/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
    msg:'邮箱格式错误'
  },
  yzm: {
    rule: /^\w{4}$/,
    msg: '验证码不能空，且只能为4位'
  },
  email_yzm: {
    rule: /^\w{4}$/,
    msg: '邮箱验证码不能空，且只能为4位'
  }
})

const form = reactive({
  email: '',
  yzm: '',
  email_yzm: ''
})

const disabled = ref(false)
const text = ref('获取邮箱证码')
const handleEmailYzm = async () => {
  if (!rules.email.rule.test(form.email)) {
    Toast.fail(rules.email.msg)
    return
  }

  if (!rules.yzm.rule.test(form.yzm)) {
    Toast.fail(rules.yzm.msg)
    return
  }

  //发送邮箱验证码
  await get_consumer_email_yzm(form.email)

  disabled.value = true
  let i = 10
  text.value = '重新发送' + i
  let timer = setInterval(() => {
    i--
    text.value = '重新发送' + i
    
    if (i <= 0) {
      clearInterval(timer)
      text.value = '获取短信验证码'
      disabled.value = false
    }
  }, 1000);
}

const handleLogin = async () => {
  if (!rules.email.rule.test(form.email)) {
    Toast.fail(rules.email.msg)
    return
  }

  if (!rules.yzm.rule.test(form.yzm)) {
    Toast.fail(rules.yzm.msg)
    return
  }

  if (!rules.email_yzm.rule.test(form.email_yzm)) {
    Toast.fail(rules.email_yzm.msg)
    return
  }

  try {
    let result = await post_consumer_login(form.email, form.yzm, form.email_yzm)

    console.log(result)
    Toast.success('登录成功')
    
    // 跳转页面 存储用户信息
    store.commit('setUser', result)
    router.push('/my')
  } catch ({ response: { data } }) {
    Toast.fail(data.msg)
  } finally {
    form.email = ''
    form.email_yzm = ''
    form.yzm = ''
  }
  
}
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;
    background-color: #f5f5f5;

    .form{
      display: grid;
      grid-template-columns: 1fr;
      padding: 30px 20px 0;
      row-gap: 20px;

      .input-wrapper {
        height: 45px;
        border-radius: 3px;
        box-shadow: 0 0 0 1px #d7d7d7;
        display: flex;
        align-items: center;

        input {
          height: 100%;
          font-size: 14px;
          padding: 0 10px;
        }

        img {
          margin-left: auto;
          height: 45px;
          width: 120px;
        }

        button {
          outline: none;
          border: none;
          background-color: #b0352f;
          box-shadow: 0 0 0 1px #b0352f;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: auto;
          border-radius: 3px;
          height: 42px;
          font-size: 14px;
          padding: 0 5px;
        }
      }

      > input {
        width: 100%;
        background-color: #b0352f;
        color: #fff;
        text-align: center;
        height: 45px;
        border-radius: 3px;
      }

      .zc {
        display: flex;
        a:nth-of-type(1) {
          color: #222;
          font-size: 14px;
        }

        a:nth-of-type(2) {
          color: #222;
          font-size: 14px;
          margin-left: auto;
        }
      }
    }
  }
}
</style>